<template>
    <div class="Manufacturer">
        <p class="Manufacturer_p">
            各厂商设备状态
        </p>
        <div ref="chart" class="Manufacturer_main">

        </div>
    </div>
</template>

<script setup>
import * as echarts from 'echarts';
import { onMounted, onBeforeUnmount, ref } from 'vue';

const chart = ref(null);
let myChart = null;

const data = {
    categories: ['某时', '西某', '某光', '香某', '某龙', '某菱'],
    total: [180, 144, 144, 64, 54, 46],
    running: [135, 123, 117, 47, 39, 20],
    standby: [27, 14, 21, 17, 15, 26],
    failure: [18, 7, 6, 0, 0, 0],
}

const Manufacturer = () => {
    myChart = echarts.init(chart.value);

    window.addEventListener('resize', function () {
        myChart.resize();
    });

    const option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow',
            },
        },
        legend: {
            data: ['设备总数', '运行', '待机', '故障'],
            right: 10,
            top: 10,
            textStyle: {
                color: '#fff',
            },
            itemWidth: 10,
            itemHeight: 10,
        },
        xAxis: {
            type: 'category',
            data: data.categories,
            axisLabel: {
                color: '#fff',
            },
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                color: '#fff',
            },
            show: false
        },
        grid: {
            left: '0%',
            right: '5%',
            top: "20%",
            bottom: '10%',
            containLabel: true,
        },
        series: [
            {
                name: '设备总数',
                type: 'bar',
                data: data.total,
                itemStyle: {
                    color: '#73C0DE',
                },
                label: {
                    show: true,
                    position: 'top',
                    color: '#fff',
                },
            },
            {
                name: '运行',
                type: 'bar',
                data: data.running,
                itemStyle: {
                    color: '#3BA272',
                },
                label: {
                    show: true,
                    position: 'top',
                    color: '#fff',
                },
            },
            {
                name: '待机',
                type: 'bar',
                data: data.standby,
                itemStyle: {
                    color: '#F4E925',
                },
                label: {
                    show: true,
                    position: 'top',
                    color: '#fff',
                },
            },
            {
                name: '故障',
                type: 'bar',
                data: data.failure,
                itemStyle: {
                    color: '#FC8452',
                },
                label: {
                    show: true,
                    position: 'top',
                    color: '#fff',
                },
            },
        ],
    }
    myChart.setOption(option)
}

onMounted(() => {
    Manufacturer()
})

onBeforeUnmount(() => {
    if (myChart) {
        myChart.dispose();
    }
})

</script>

<style lang="scss" scoped>
.Manufacturer {
    width: 400px;
    height: 200px;
    position: fixed;
    top: 500px;
    left: 8px;
    background: url(/src/assets/Frame_Bottom.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% 100%;

    .Manufacturer_p {
        width: 100%;
        height: 20px;
        text-align: center;
        line-height: 20px;
        font-size: 15px;
    }

    .Manufacturer_main {
        width: 100%;
        height: 100%;
    }
}
</style>